<template>
  <div class="user-profile-container">
    <el-card class="profile-card" v-loading="loading.userInfo">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基本资料" name="basic">
          <el-form
            :model="userForm"
            :rules="rules"
            ref="userFormRef"
            label-width="100px"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username" disabled />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="userForm.nickname" placeholder="请输入昵称" />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="userForm.phone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userForm.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="userForm.gender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
                <el-radio :label="0">保密</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitUserForm">保存</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="修改密码" name="password">
          <el-form
            :model="passwordForm"
            :rules="passwordRules"
            ref="passwordFormRef"
            label-width="120px"
          >
            <el-form-item label="旧密码" prop="oldPassword">
              <el-input
                v-model="passwordForm.oldPassword"
                type="password"
                placeholder="请输入旧密码"
                show-password
              />
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
              <el-input
                v-model="passwordForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                show-password
              />
            </el-form-item>
            <el-form-item label="确认新密码" prop="confirmPassword">
              <el-input
                v-model="passwordForm.confirmPassword"
                type="password"
                placeholder="请再次输入新密码"
                show-password
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitPasswordForm">更新密码</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="头像设置" name="avatar">
          <div class="avatar-upload-container">
            <div class="current-avatar">
              <img :src="userForm.avatar || defaultAvatar" alt="用户头像" class="avatar-image" />
            </div>
            <div class="avatar-upload">
              <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="handleAvatarChange"
              >
                <el-button type="primary">选择图片</el-button>
              </el-upload>
              <p class="upload-tip">支持JPG、PNG格式，建议上传正方形图片，大小不超过2MB</p>
              
              <div v-if="avatarForm.imageUrl" class="avatar-preview">
                <img :src="avatarForm.imageUrl" alt="预览" class="preview-image" />
                <div class="preview-actions">
                  <el-button type="primary" @click="submitAvatarForm">保存头像</el-button>
                  <el-button @click="cancelAvatarUpload">取消</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <el-tab-pane label="账号绑定" name="binding">
          <div class="binding-container">
            <div class="binding-item">
              <div class="binding-info">
                <i class="binding-icon el-icon-mobile-phone"></i>
                <div class="binding-details">
                  <div class="binding-name">手机绑定</div>
                  <div class="binding-description">
                    {{ userForm.phone ? `已绑定手机：${maskPhone(userForm.phone)}` : '未绑定手机' }}
                  </div>
                </div>
              </div>
              <div class="binding-action">
                <el-button 
                  type="primary" 
                  link 
                  @click="handleBinding('phone')"
                >
                  {{ userForm.phone ? '修改' : '绑定' }}
                </el-button>
              </div>
            </div>
            
            <div class="binding-item">
              <div class="binding-info">
                <i class="binding-icon el-icon-message"></i>
                <div class="binding-details">
                  <div class="binding-name">邮箱绑定</div>
                  <div class="binding-description">
                    {{ userForm.email ? `已绑定邮箱：${maskEmail(userForm.email)}` : '未绑定邮箱' }}
                  </div>
                </div>
              </div>
              <div class="binding-action">
                <el-button 
                  type="primary" 
                  link 
                  @click="handleBinding('email')"
                >
                  {{ userForm.email ? '修改' : '绑定' }}
                </el-button>
              </div>
            </div>
            
            <div class="binding-item">
              <div class="binding-info">
                <i class="binding-icon el-icon-chat-dot-round"></i>
                <div class="binding-details">
                  <div class="binding-name">微信绑定</div>
                  <div class="binding-description">
                    {{ userBindings.wechat ? '已绑定微信账号' : '未绑定微信账号' }}
                  </div>
                </div>
              </div>
              <div class="binding-action">
                <el-button 
                  type="primary" 
                  link 
                  @click="handleBinding('wechat')"
                >
                  {{ userBindings.wechat ? '解绑' : '绑定' }}
                </el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        
<!--        <el-tab-pane label="消息通知" name="notification">-->
<!--          <div class="notification-container">-->
<!--            <el-form label-width="200px">-->
<!--              <el-form-item label="系统消息">-->
<!--                <el-switch v-model="notificationSettings.system" @change="updateNotificationSettings" />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="安全消息">-->
<!--                <el-switch v-model="notificationSettings.security" @change="updateNotificationSettings" />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="活动消息">-->
<!--                <el-switch v-model="notificationSettings.activity" @change="updateNotificationSettings" />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="交易消息">-->
<!--                <el-switch v-model="notificationSettings.transaction" @change="updateNotificationSettings" />-->
<!--              </el-form-item>-->
<!--              -->
<!--              <el-divider content-position="left">接收方式</el-divider>-->
<!--              -->
<!--              <el-form-item label="接收站内信">-->
<!--                <el-switch v-model="notificationSettings.internalMessage" @change="updateNotificationSettings" />-->
<!--              </el-form-item>-->
<!--              <el-form-item label="接收邮件">-->
<!--                <el-switch v-model="notificationSettings.email" @change="updateNotificationSettings" />-->
<!--                <span class="notification-tip" v-if="!userForm.email">-->
<!--                  请先在"账号绑定"中绑定邮箱-->
<!--                </span>-->
<!--              </el-form-item>-->
<!--              <el-form-item label="接收短信">-->
<!--                <el-switch v-model="notificationSettings.sms" @change="updateNotificationSettings" />-->
<!--                <span class="notification-tip" v-if="!userForm.phone">-->
<!--                  请先在"账号绑定"中绑定手机-->
<!--                </span>-->
<!--              </el-form-item>-->
<!--            </el-form>-->
<!--          </div>-->
<!--        </el-tab-pane>-->
        
        <el-tab-pane label="登录日志" name="login-log">
          <el-table 
            :data="loginLogs" 
            style="width: 100%" 
            v-loading="loading.loginLogs"
          >
            <el-table-column prop="id" label="编号" width="80" />
            <el-table-column prop="loginTime" label="登录时间" width="180" />
            <el-table-column prop="ipAddress" label="IP地址" width="150" />
            <el-table-column prop="location" label="登录地点" width="150" />
            <el-table-column prop="browser" label="浏览器" />
            <el-table-column prop="os" label="操作系统" width="150" />
            <el-table-column prop="status" label="状态" width="100">
              <template #default="scope">
                <el-tag :type="scope.row.status === 'success' ? 'success' : 'danger'">
                  {{ scope.row.status === 'success' ? '成功' : '失败' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="logQuery.page"
              v-model:page-size="logQuery.size"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="logTotal"
              @size-change="handleLogSizeChange"
              @current-change="handleLogPageChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    
    <!-- 手机/邮箱绑定对话框 -->
    <el-dialog v-model="bindingVisible" :title="bindingTitle" width="500px">
      <el-form 
        :model="bindingForm" 
        :rules="bindingRules" 
        ref="bindingFormRef" 
        label-width="80px"
      >
        <template v-if="bindingType === 'phone'">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="bindingForm.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="verification-code">
              <el-input v-model="bindingForm.code" placeholder="请输入验证码" />
              <el-button 
                :disabled="codeCounting" 
                @click="sendVerificationCode"
              >
                {{ codeCounting ? `${countdown}秒后重新获取` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </template>
        
        <template v-if="bindingType === 'email'">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="bindingForm.email" placeholder="请输入邮箱" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <div class="verification-code">
              <el-input v-model="bindingForm.code" placeholder="请输入验证码" />
              <el-button 
                :disabled="codeCounting" 
                @click="sendVerificationCode"
              >
                {{ codeCounting ? `${countdown}秒后重新获取` : '获取验证码' }}
              </el-button>
            </div>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="bindingVisible = false">取消</el-button>
          <el-button type="primary" @click="submitBindingForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { userAPI, logAPI } from '@/api/api'

export default {
  name: 'UserProfile',
  setup() {
    // Tab激活
    const activeTab = ref('basic')
    
    // 默认头像
    const defaultAvatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')
    
    // 表单引用
    const userFormRef = ref(null)
    const passwordFormRef = ref(null)
    const bindingFormRef = ref(null)
    
    // 用户表单
    const userForm = reactive({
      id: '',
      username: '',
      nickname: '',
      email: '',
      phone: '',
      gender: 0,
      avatar: ''
    })
    
    // 密码表单
    const passwordForm = reactive({
      oldPassword: '',
      newPassword: '',
      confirmPassword: ''
    })
    
    // 头像表单
    const avatarForm = reactive({
      imageUrl: '',
      file: null
    })
    
    // 绑定表单
    const bindingForm = reactive({
      phone: '',
      email: '',
      code: ''
    })
    
    // 用户绑定状态
    const userBindings = reactive({
      wechat: false
    })
    
    // 通知设置
    const notificationSettings = reactive({
      system: true,
      security: true,
      activity: false,
      transaction: true,
      internalMessage: true,
      email: false,
      sms: false
    })
    
    // 绑定对话框
    const bindingVisible = ref(false)
    const bindingType = ref('')
    
    // 验证码相关
    const codeCounting = ref(false)
    const countdown = ref(60)
    let timer = null
    
    // 登录日志
    const loginLogs = ref([])
    const logTotal = ref(0)
    const logQuery = reactive({
      page: 1,
      size: 10
    })
    
    // 加载状态
    const loading = reactive({
      userInfo: false,
      loginLogs: false
    })
    
    // 绑定对话框标题
    const bindingTitle = computed(() => {
      if (bindingType.value === 'phone') {
        return userForm.phone ? '修改手机绑定' : '绑定手机号'
      } else if (bindingType.value === 'email') {
        return userForm.email ? '修改邮箱绑定' : '绑定邮箱'
      } else if (bindingType.value === 'wechat') {
        return userBindings.wechat ? '解绑微信' : '绑定微信'
      }
      return ''
    })
    
    // 表单验证规则
    const rules = {
      nickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' },
        { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
      ],
      phone: [
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ]
    }
    
    const passwordRules = {
      oldPassword: [
        { required: true, message: '请输入旧密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, message: '请再次输入新密码', trigger: 'blur' },
        { 
          validator: (rule, value, callback) => {
            if (value !== passwordForm.newPassword) {
              callback(new Error('两次输入密码不一致!'))
            } else {
              callback()
            }
          }, 
          trigger: 'blur' 
        }
      ]
    }
    
    const bindingRules = {
      phone: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
      ],
      email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
      ],
      code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { min: 4, max: 6, message: '验证码长度不正确', trigger: 'blur' }
      ]
    }
    
    // 获取用户信息
    const fetchUserInfo = async () => {
      loading.userInfo = true
      try {
        const response = await userAPI.getUserInfo()
        
        if (response.success) {
          const data = response.data
          
          // 更新用户表单
          userForm.id = data.id
          userForm.username = data.username
          userForm.nickname = data.nickname || ''
          userForm.email = data.email || ''
          userForm.phone = data.phone || ''
          userForm.gender = data.gender !== undefined ? data.gender : 0
          userForm.avatar = data.avatar || ''
          
          // 更新绑定状态
          userBindings.wechat = !!data.wechatId
          
          // 更新通知设置
          if (data.notificationSettings) {
            Object.assign(notificationSettings, data.notificationSettings)
          }
        } else {
          ElMessage.error('获取用户信息失败: ' + response.message)
        }
      } catch (error) {
        console.error('获取用户信息失败:', error)
        ElMessage.error('获取用户信息失败: ' + (error.message || '未知错误'))
      } finally {
        loading.userInfo = false
      }
    }
    
    // 获取登录日志
    const fetchLoginLogs = async () => {
      loading.loginLogs = true
      try {
        const params = {
          page: logQuery.page,
          size: logQuery.size,
          username: userForm.username
        }
        
        const response = await logAPI.getLoginLogs(params)
        
        if (response.success) {
          loginLogs.value = response.data.list || []
          logTotal.value = response.data.totalItems || 0
        } else {
          ElMessage.error('获取登录日志失败: ' + response.message)
        }
      } catch (error) {
        console.error('获取登录日志失败:', error)
        ElMessage.error('获取登录日志失败: ' + (error.message || '未知错误'))
      } finally {
        loading.loginLogs = false
      }
    }
    
    // 提交用户表单
    const submitUserForm = async () => {
      if (!userFormRef.value) return
      
      userFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            const response = await userAPI.updateUserInfo({
              id: userForm.id,
              nickname: userForm.nickname,
              email: userForm.email,
              phone: userForm.phone,
              gender: userForm.gender
            })
            
            if (response.success) {
              ElMessage.success('更新个人信息成功')
            } else {
              ElMessage.error('更新个人信息失败: ' + response.message)
            }
          } catch (error) {
            console.error('更新个人信息失败:', error)
            ElMessage.error('更新个人信息失败: ' + (error.message || '未知错误'))
          }
        }
      })
    }
    
    // 提交密码表单
    const submitPasswordForm = async () => {
      if (!passwordFormRef.value) return
      
      passwordFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            const response = await userAPI.updatePassword({
              oldPassword: passwordForm.oldPassword,
              newPassword: passwordForm.newPassword
            })
            
            if (response.success) {
              ElMessage.success('修改密码成功')
              // 清空表单
              passwordForm.oldPassword = ''
              passwordForm.newPassword = ''
              passwordForm.confirmPassword = ''
              passwordFormRef.value.resetFields()
            } else {
              ElMessage.error('修改密码失败: ' + response.message)
            }
          } catch (error) {
            console.error('修改密码失败:', error)
            ElMessage.error('修改密码失败: ' + (error.message || '未知错误'))
          }
        }
      })
    }
    
    // 处理头像选择
    const handleAvatarChange = (file) => {
      // 文件类型验证
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      
      if (!isJPG && !isPNG) {
        ElMessage.error('上传头像图片只能是 JPG 或 PNG 格式!')
        return
      }
      
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!')
        return
      }
      
      // 设置预览
      avatarForm.file = file.raw
      avatarForm.imageUrl = URL.createObjectURL(file.raw)
    }
    
    // 提交头像表单
    const submitAvatarForm = async () => {
      if (!avatarForm.file) {
        ElMessage.warning('请先选择要上传的头像')
        return
      }
      
      try {
        // 创建表单数据
        const formData = new FormData()
        formData.append('avatar', avatarForm.file)
        
        const response = await userAPI.uploadAvatar(formData)
        
        if (response.success) {
          ElMessage.success('上传头像成功')
          userForm.avatar = response.data.url
          cancelAvatarUpload()
        } else {
          ElMessage.error('上传头像失败: ' + response.message)
        }
      } catch (error) {
        console.error('上传头像失败:', error)
        ElMessage.error('上传头像失败: ' + (error.message || '未知错误'))
      }
    }
    
    // 取消头像上传
    const cancelAvatarUpload = () => {
      avatarForm.file = null
      avatarForm.imageUrl = ''
    }
    
    // 处理账号绑定
    const handleBinding = (type) => {
      bindingType.value = type
      
      if (type === 'phone') {
        bindingForm.phone = userForm.phone || ''
      } else if (type === 'email') {
        bindingForm.email = userForm.email || ''
      } else if (type === 'wechat') {
        if (userBindings.wechat) {
          // 解绑微信
          unbindWechat()
          return
        } else {
          // 绑定微信，跳转授权
          bindWechat()
          return
        }
      }
      
      bindingForm.code = ''
      bindingVisible.value = true
    }
    
    // 发送验证码
    const sendVerificationCode = async () => {
      if (bindingType.value === 'phone') {
        if (!bindingForm.phone) {
          ElMessage.warning('请先输入手机号')
          return
        }
        
        if (!/^1[3-9]\d{9}$/.test(bindingForm.phone)) {
          ElMessage.warning('请输入正确的手机号码')
          return
        }
      } else if (bindingType.value === 'email') {
        if (!bindingForm.email) {
          ElMessage.warning('请先输入邮箱')
          return
        }
        
        if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(bindingForm.email)) {
          ElMessage.warning('请输入正确的邮箱地址')
          return
        }
      }
      
      try {
        const params = {
          type: bindingType.value,
          [bindingType.value]: bindingType.value === 'phone' ? bindingForm.phone : bindingForm.email
        }
        
        const response = await userAPI.sendVerificationCode(params)
        
        if (response.success) {
          ElMessage.success(`验证码已发送到您的${bindingType.value === 'phone' ? '手机' : '邮箱'}`)
          
          // 开始倒计时
          codeCounting.value = true
          countdown.value = 60
          
          timer = setInterval(() => {
            if (countdown.value > 0) {
              countdown.value--
            } else {
              clearInterval(timer)
              codeCounting.value = false
            }
          }, 1000)
        } else {
          ElMessage.error('发送验证码失败: ' + response.message)
        }
      } catch (error) {
        console.error('发送验证码失败:', error)
        ElMessage.error('发送验证码失败: ' + (error.message || '未知错误'))
      }
    }
    
    // 提交绑定表单
    const submitBindingForm = async () => {
      if (!bindingFormRef.value) return
      
      bindingFormRef.value.validate(async (valid) => {
        if (valid) {
          try {
            const params = {
              type: bindingType.value,
              [bindingType.value]: bindingType.value === 'phone' ? bindingForm.phone : bindingForm.email,
              code: bindingForm.code
            }
            
            const response = await userAPI.updateBinding(params)
            
            if (response.success) {
              ElMessage.success(`${bindingType.value === 'phone' ? '手机' : '邮箱'}绑定成功`)
              
              // 更新用户信息
              if (bindingType.value === 'phone') {
                userForm.phone = bindingForm.phone
              } else if (bindingType.value === 'email') {
                userForm.email = bindingForm.email
              }
              
              bindingVisible.value = false
            } else {
              ElMessage.error(`${bindingType.value === 'phone' ? '手机' : '邮箱'}绑定失败: ` + response.message)
            }
          } catch (error) {
            console.error(`${bindingType.value === 'phone' ? '手机' : '邮箱'}绑定失败:`, error)
            ElMessage.error(`${bindingType.value === 'phone' ? '手机' : '邮箱'}绑定失败: ` + (error.message || '未知错误'))
          }
        }
      })
    }
    
    // 绑定微信
    const bindWechat = () => {
      // 实际应该调用微信授权接口，这里只是模拟
      ElMessage.info('请扫描二维码授权绑定微信账号')
    }
    
    // 解绑微信
    const unbindWechat = async () => {
      try {
        const response = await userAPI.unbindWechat()
        
        if (response.success) {
          ElMessage.success('微信解绑成功')
          userBindings.wechat = false
        } else {
          ElMessage.error('微信解绑失败: ' + response.message)
        }
      } catch (error) {
        console.error('微信解绑失败:', error)
        ElMessage.error('微信解绑失败: ' + (error.message || '未知错误'))
      }
    }
    
    // 更新通知设置
    const updateNotificationSettings = async () => {
      try {
        const response = await userAPI.updateNotificationSettings(notificationSettings)
        
        if (response.success) {
          ElMessage.success('通知设置更新成功')
        } else {
          ElMessage.error('通知设置更新失败: ' + response.message)
        }
      } catch (error) {
        console.error('通知设置更新失败:', error)
        ElMessage.error('通知设置更新失败: ' + (error.message || '未知错误'))
      }
    }
    
    // 分页相关
    const handleLogSizeChange = (newSize) => {
      logQuery.size = newSize
      fetchLoginLogs()
    }
    
    const handleLogPageChange = (newPage) => {
      logQuery.page = newPage
      fetchLoginLogs()
    }
    
    // 隐私处理
    const maskPhone = (phone) => {
      return phone ? phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : ''
    }
    
    const maskEmail = (email) => {
      if (!email) return ''
      const [name, domain] = email.split('@')
      return `${name.substring(0, 3)}***@${domain}`
    }
    
    // 生命周期钩子
    onMounted(() => {
      fetchUserInfo()
      fetchLoginLogs()
    })
    
    return {
      activeTab,
      defaultAvatar,
      userFormRef,
      passwordFormRef,
      bindingFormRef,
      userForm,
      passwordForm,
      avatarForm,
      bindingForm,
      userBindings,
      notificationSettings,
      bindingVisible,
      bindingType,
      bindingTitle,
      codeCounting,
      countdown,
      loginLogs,
      logTotal,
      logQuery,
      loading,
      rules,
      passwordRules,
      bindingRules,
      submitUserForm,
      submitPasswordForm,
      handleAvatarChange,
      submitAvatarForm,
      cancelAvatarUpload,
      handleBinding,
      sendVerificationCode,
      submitBindingForm,
      updateNotificationSettings,
      handleLogSizeChange,
      handleLogPageChange,
      maskPhone,
      maskEmail
    }
  }
}
</script>

<style scoped>
.user-profile-container {
  padding: 20px;
}

.profile-card {
  margin-bottom: 20px;
}

/* 头像设置样式 */
.avatar-upload-container {
  display: flex;
  margin-top: 20px;
}

.current-avatar {
  text-align: center;
  margin-right: 40px;
}

.avatar-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #eee;
}

.avatar-upload {
  flex: 1;
}

.upload-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 8px;
}

.avatar-preview {
  margin-top: 20px;
}

.preview-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px dashed #d9d9d9;
  margin-bottom: 10px;
}

.preview-actions {
  display: flex;
  gap: 10px;
}

/* 账号绑定样式 */
.binding-container {
  padding: 10px 0;
}

.binding-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ebeef5;
}

.binding-item:last-child {
  border-bottom: none;
}

.binding-info {
  display: flex;
  align-items: center;
}

.binding-icon {
  font-size: 24px;
  color: #409eff;
  margin-right: 16px;
}

.binding-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.binding-description {
  font-size: 13px;
  color: #909399;
}

/* 验证码输入框 */
.verification-code {
  display: flex;
}

.verification-code .el-input {
  margin-right: 10px;
}

/* 通知提示 */
.notification-tip {
  font-size: 12px;
  color: #f56c6c;
  margin-left: 10px;
}

/* 分页容器 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style> 